<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" href="./css/aui.css" type="text/css">
    <style>
        header span {
            display: none;
        }

        header span.active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="wrap" class="flex-wrap flex-vertical">
        <header class="aui-bar aui-bar-nav">
            <span class="headerItem active">待办</span>
            <span class="headerItem">控制台</span>
            <span class="headerItem">个人中心</span>
        </header>
        <div id="main" class="flex-con">
        </div>
        <footer class="aui-bar aui-bar-tab">
            <div class="aui-bar-tab-item aui-active" tapmode onclick="randomSwitchBtn( this );">
                <!-- <div class="aui-badge">0</div> -->
                <i class="aui-iconfont aui-icon-home"></i>
                <div class="aui-bar-tab-label">待办</div>
            </div>
            <div class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn( this );">
                <i class="aui-iconfont aui-icon-cart"></i>
                <div class="aui-bar-tab-label">控制台</div>
            </div>
            <div class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn( this );">
                <i class="aui-iconfont aui-icon-my"></i>
                <div class="aui-bar-tab-label">我的</div>
            </div>
        </footer>
    </div>
</body>

</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript">
    const footList = $api.domAll('.aui-bar-tab-item');
    const headerLis = $api.domAll('.aui-bar-nav .headerItem');
    let token = $api.getStorage('token');
    let uid = $api.getStorage('uid');
    let params = {};
    apiready = function() {
            $api.fixStatusBar($api.dom('header'));
            if (!token) {
                api.openWin({
                    name: 'login',
                    url: './html/login/index.html'
                });
                return;
            }
            // Init();
            InitG();
        }
        // 初始化frame
    function InitG() {
        let frames = [];
        let statusBarH = 0;
        let headerH = $api.offset($api.dom('header')).h;
        let footerH = $api.offset($api.dom('footer')).h;
        // 判断当前系统类型
        let osType = api.systemType
        if (osType === 'ios') {
            statusBarH = 20;
        } else if (osType === 'android') {
            statusBarH = 25;
        } else {
            statusBarH = 0;
        }
        // 状态栏的高度
        $api.setStorage('barH', statusBarH);
        api.setStatusBarStyle({
            style: 'light',
        });
        // 定义页面参数
        const pageJson = [{
                name: "home",
                url: "./html/main/home.html",
                bgColor: 'rgba(0,0,0,.3)',
                bounces: true,
                pageParam: params
            }, {
                name: "control",
                url: "./html/control/index.html",
                bgColor: 'rgba(0,0,0,.3)',
                bounces: true,
                pageParam: params
            }, {
                name: "profile",
                url: "./html/profile/index.html",
                bgColor: 'rgba(0,0,0,.3)',
                bounces: false,
                pageParam: params
            }]
            // 遍历frame
        for (let val of pageJson) {
            frames.push({
                name: val.name,
                url: val.url,
                bgColor: val.bgColor,
                bounces: val.bounces,
                pageParam: val.pageParam
            })
        }
        // 打开默认的frame
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: headerH,
                w: api.winWidth,
                h: api.frameHeight - headerH - footerH - statusBarH
            },
            index: 1, // 默认显示
            frames: frames
        }, function(ret, err) {
            // console.log(`首页：`);
            // console.log(JSON.stringify(ret));
            api.sendEvent({
                name: 'pageIndexChange',
                extra: {
                    id: ret.index,
                }
            });

        });
    }
    // 随意切换按钮
    function randomSwitchBtn(tag) {
        if (tag === $api.dom('.aui-bar-tab-item.aui-active')) return;
        let fIndex = 0;
        for (let i = 0; i < footList.length; i++) {
            if (tag === footList[i]) {
                fIndex = i;
            } else {
                $api.removeCls(footList[i], 'aui-active');
                $api.removeCls(headerLis[i], 'active');
            }
        }
        $api.addCls(footList[fIndex], 'aui-active');
        $api.addCls(headerLis[fIndex], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: fIndex
        });
    }

</script>
